<template>
  <div class="infoList">
   <!-- <app-header></app-header> -->
   <div class="main">
    <group title="账号信息">
      <x-input title='手机号' text-align="right"  placeholder="请输入手机号" ></x-input>
       <x-input title='身份证' text-align="right"  placeholder="请输入身份证号" ></x-input>
    </group>
    <group title="基本信息">
      <x-input title='姓名' text-align="right"  placeholder="请输入姓名" show-clear="false"></x-input>
     <popup-picker 
                    :title='title2'
                    :data="sexList"
                    v-model="sexes"
                    @on-change="change2"
                    placeholder="请选择性别">
        </popup-picker>
      <!-- <selector placeholder="请选择性别" title='性别'  v-model="demo02" :options="list"></selector> -->
      <x-input title='职务' text-align="right"  placeholder="请输入职务" ></x-input>
      <popup-picker 
                    :title='tit1'
                    :data="organList"
                    v-model="organ"
                    placeholder="请选择编制类型">
        </popup-picker>
        
         <popup-picker 
                    :title='tit2'
                    :data="politicList"
                    v-model="politic"
                    placeholder="请选择政治面貌">
        </popup-picker>

        <popup-picker 
                    :title='tit3'
                    :data="educList"
                    v-model="educ"
                    placeholder="请选择学历">
        </popup-picker>
    </group>
    <group title="单位信息">
      <popup-picker :title="title3" placeholder="请选择市州" :data="cityList" v-model="citys"></popup-picker>
      <!-- <selector placeholder="请选择市州" title='所在市州'  v-model="demo02" :options="list"></selector> -->
      <!-- <selector placeholder="请选择区域" title='所在区域'  v-model="demo02" :options="list"></selector> -->
      <popup-picker :title="title4" :data="cityLists" placeholder="请选择区域" :columns="3" v-model="citys2" show-name></popup-picker>
      <x-input title='单位名称' text-align="right"  placeholder="请输入单位名称" ></x-input>
      <x-input title='部门名称' text-align="right"  placeholder="请输入部门名称" ></x-input>
      <popup-picker 
                    :title='title1'
                    :data="checkLevelList"
                    v-model="beCheckedLevel"
                    @on-change="change"
                    placeholder="请选择单位类型">
        </popup-picker>
        <!-- <selector placeholder="请选择单位类型" title='单位类型'  v-model="demo02" :options="list"></selector> -->
    </group>
    <div class="fileimg">
        <label>上传图片</label>
        <span class="showimg" :class="{'hideimg':toggle}" @click="toggle = !toggle"></span>
       
    </div>
     <div class="imginfo" v-if="toggle">
              <!-- <div class="space-img1">
                        <div>电子照片</div>
                        <i class="ico"></i>
                    </div> -->
          <div class="upload-wrap">
              <div class="upload-item">
                  <img src="@/assets/images/proof.jpg" alt="">
                  <span></span>
              </div>
              <div class="upload-item" style="margin-left:15px">
                  <img src="@/assets/images/upload.png"
                      alt="">
                  <!-- <input type="file"> -->
              </div>
          </div>

                    <div class="space-img2">
                        <div>学历证明</div>
                        <i class="ico"></i>
                    </div>

                    <div class="space-img3">
                        <div>编制证明</div>
                        <i class="ico"></i>
                    </div>

                    <div class="space-img4">
                        <div>职称证明</div>
                        <i class="ico"></i>
                    </div>
        </div>
    <span class="btn">完 &nbsp;&nbsp; 成</span>
   </div>
  </div>
</template>

<script>
import Header from '../../components/header'
import { XInput, Group, XButton, Cell, Selector, CellBox,PopupPicker} from 'vux'
export default {
  components: {
    'app-header':Header,
     XInput,
    XButton,
    Group,
    Cell,
    Selector,
    CellBox,
    PopupPicker
  },
  data() {
    return {
      title1:'单位类型',
      title2:'性别',
      title3:'所在市州',
      title4:'所在区域',
      tit1:'编制类型',
      tit2:'政治面貌',
      tit3:'学历',
      organList:[['事业单位','非事业单位']],
      organ:[],
      politicList:[['团员','党员','群众']],
      politic:[],
      educList:[['大专','本科','硕士','博士']],
      educ:[],
      sexList:[['男','女']],
      sexes:[],
      checkLevelList: [['全部', '私营', '国企', '其他']], 
      beCheckedLevel: [], 
      cityList: [['武汉市', '襄阳市', '宜昌市',  '其他'], ['江夏区', '襄城区', '枝江市', '其他2']],
      citys:[],
      cityLists:[{
        name: '中国',
        value: 'china',
        parent: 0
      }, {
        name: '美国',
        value: 'USA',
        parent: 0
      }, {
        name: '广东',
        value: 'china001',
        parent: 'china'
      }, {
        name: '广西',
        value: 'china002',
        parent: 'china'
      }, {
        name: '美国001',
        value: 'usa001',
        parent: 'USA'
      }, {
        name: '美国002',
        value: 'usa002',
        parent: 'USA'
      }, {
        name: '广州',
        value: 'gz',
        parent: 'china001'
      }, {
        name: '深圳',
        value: 'sz',
        parent: 'china001'
      }, {
        name: '广西001',
        value: 'gx001',
        parent: 'china002'
      }, {
        name: '广西002',
        value: 'gx002',
        parent: 'china002'
      }, {
        name: '美国001_001',
        value: '0003',
        parent: 'usa001'
      }, {
        name: '美国001_002',
        value: '0004',
        parent: 'usa001'
      }, {
        name: '美国002_001',
        value: '0005',
        parent: 'usa002'
      }, {
        name: '美国002_002',
        value: '0006',
        parent: 'usa002'
      }],
      citys2:[],
      demo02: '',
      toggle:false,
      list: [{key: '0', value: '男'}, {key: '1', value: '女'}],
      };
  },
  created() {},
  methods: {
     change (item) {
            console.log(item)
            this.beCheckedLevel = item
        },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

 .infoList .weui-cells__title{
  height:40px;
  font-size:15px;
  color:#2269ff;
  font-weight:bold;
  line-height:40px;
  width: 100%;
}
.infoList .weui-cell{
  height:40px;
  font-size:15px;
  line-height:40px;
  margin-right: 15px;
  font-weight: bold;
}
.infoList .weui-cell_select-after .weui-select {
    color: inherit !important;
    direction: rtl !important;
}
.infoList weui-input{
  color: #999999;
}
.fileimg{
    display: flex;
    justify-content: space-between;
    height:55px;
    line-height: 55px;
    padding:0 24px 0 15px;
}
.fileimg label{
    font-size:15px;
    color:#2269ff;
    font-weight:700;
    width:calc(100% - 20px)
}
.showimg{
    display: block;
    height: 20px;
    width: 20px;
    background: url('../../assets/images/show_more.png') center center no-repeat;
    background-size: 12px 7px;
    margin-top:16px;
    transform: rotate(0deg);
    transition: .3s;
}
.showimg.hideimg{
    transform: rotate(180deg);
    transition: .3s;
}
.imginfo{
   padding:0 24px 0 15px; 
}
.space-img1{
    margin-top:15px;
}
.space-img4{
    margin-bottom:20px;
}
.ico{
    display:block;
    width:50px;
    height:50px;
    border-radius: 5px;
    margin:5px 0 25px 0;
    background: url('../../assets/images/proof.jpg') no-repeat center center
}
.space-img1 div,.space-img2 div,.space-img3 div,.space-img4 div{
    font-size:16px;
    font-weight:bold;
    height:40px;
    line-height: 40px;
}
.space-img1,.space-img2,.space-img3,.space-img4{
    border-bottom:1px solid #eee;

}
.upload-wrap{
  display: flex;
}
.upload-item{
  position: relative;
}
.upload-item img{
  display: block;
  width:50px;
  height:50px;
  border-radius:5px;
}
.upload-item span{
  background: url(../../assets/images/delete.png) no-repeat right top;
  background-size: 15px;
  width: 15px;
  height: 15px;
  position: absolute;
  top:0;
  right:0;
}
</style>>
<style scoped>
.main {
  padding: 0px 0px 25px 0px;
  text-align: left;
}
.btn{
  display:block;
  height:45px;
  font-size:17px;
  background-color:#2269ff;
  font-weight:bold;
  line-height:45px;
  width: 230px;
  color: #ffffff;
  text-align: center;
  border-radius: 10px;
  margin: auto;
  margin-top: 20px;
}

</style>
